import React from 'react';
import { Button } from 'element-react';
import {Footer} from '../Components';
import {connect} from 'react-redux';
import {getdata,getListData,getProduct} from '../action/home'; //这里是引入login里的方法
import mapStateToProps from '../value/mapStateToProps'//连接仓库
import { NavLink} from 'react-router-dom';

class Home extends React.Component{
    constructor (props) {  
        super(props)  
      }

      componentWillMount(){          
          this.props.getdata({})    
          this.props.getProduct({})
          
      }
    render(){
        var style={
            Banner:{
                width:"1440px",
                height:"340px"
            },
            Main1:{
                marginTop:"20px"
            }

        }
    const products = this.props.homeproduc.produclists.docs;
    const newss  = this.props.news.lists.docs;
    // const pros  = this.props.news.lists.docs;
    
    var lst= [];
    var productLst = [];
    var comments = [];
    for(var i=0;i<newss.length;i++){
        lst.push(
            <div className="col-lg-4" key={i}>
                <img className="img-circle" 
                 src={newss[i].src} style={{width:"120px",height:'120px',borderRadius:"50%",overflow:"hidden"}}/>
                <h2>{newss[i].global}</h2>
                <p>{newss[i].content}</p>
                <p><NavLink className="btn btn-default" to="/news" role="button">查看详情 &raquo;</NavLink></p>
            </div>
        )

    }
    if(products.length > 4 ){
        products.length = 4;
    }
    for(var i=0;i<products.length;i++){
        productLst.push(
            <div key={i}>
                <div className="row featurette">
                <div className="col-md-7 col-md-push-5">
                    <h2 className="featurette-heading">{products[i].name}<span className="text-muted">See for yourself.</span></h2>
                    <p className="lead">{products[i].detail}</p>
                </div>
                <div className="col-md-5 col-md-pull-7">
                    <img className="featurette-image img-responsive center-block" src={products[i].src} alt="Generic placeholder image"/> 
                </div>
                </div>

                <hr className="featurette-divider"/>
            </div>

        )
    }

    for(var i=0;i<newss.length;i++){
        comments.push(
            <div className="media" key={i}>
                <div className="media-left media-middle">
                    <a href="#">
                    <img className="media-object" src={newss[i].src}  style={{width:"100px",height:"100px"}}/>
                    </a>
                </div>
                <div className="media-body">
                    <h4 className="media-heading">{newss[i].global}</h4>
                    {newss[i].content}
                </div>
            </div>
        )
    }
        return(
        <div>
   
            {/* banner */}

            <div id="myCarousel" className="carousel slide" data-ride="carousel">
                <ol className="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" className="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div className="carousel-inner" role="listbox">
                    <div className="item active">
                    <img style={style.Banner} className="first-slide" src="../../img/banner/ban1.png"/>     
                        <div className="container">
                        <div className="carousel-caption">
                        <h1>Example headline.</h1>
                        <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
                        <p><a className="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                        </div>
                    </div>
                    </div>
                    <div className="item">
                    <img style={style.Banner} className="second-slide" src="../../img/banner/ban2.png" alt="Second slide"/>
                    <div className="container">
                        <div className="carousel-caption">
                        <h1>Another example headline.</h1>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><a className="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                        </div>
                    </div>
                    </div>
                    <div className="item">
                    <img style={style.Banner} className="third-slide" src="../../img/banner/ban5.jpg" alt="Third slide"/>          <div className="container">
                        <div className="carousel-caption">
                        <h1>One more for good measure.</h1>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><a className="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                        </div>
                    </div>
                    </div>
                </div>
                <a className="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span className="sr-only">Previous</span>
                </a>
                <a className="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span className="sr-only">Next</span>
                </a>
            </div> 

            {/* main -1 */}
        <div className="container" style={style.Main1}>
            <div className="alert alert-info" role="alert">
                 <a href="#" className="alert-link">最新新闻</a>
            </div>
     
            <div className="row">

             {lst} 
            
            </div>
        </div>
            {/* main -2 */}
        <div className="container" style={style.Main1}>
           
            <div className="alert alert-success" role="alert">           
                <a href="#" className="alert-link">最新产品</a>
            </div>
           {productLst} 
        </div>

           {/*  用户 */}
        <div className="container" style={style.Main1}>
                
            <div className="alert alert-warning" role="alert">           
                <a href="#" className="alert-link">用户反馈</a>
            </div>
            {comments}   
            
        </div>
            <Footer/>
            
        </div>
        )
    }
}

export default connect(mapStateToProps,{getdata,getListData,getProduct})(Home);